<template>
  <div class="changePw">
    <div class="content">
      <label>旧密码:</label>
      <input
        type="text"
        placeholder="请输入你的旧密码"
        v-model="oldBuyerPw"
        required
      />
    </div>
    <div class="content">
      <label>新密码:</label>
      <input
        type="password"
        placeholder="请输入你的新密码"
        v-model="buyerPw"
        name="buyerPw"
        required
        v-validate="{
          required: true,
          regex: /^(?=.*[a-zA-Z])(?=.*[0-9])[A-Za-z0-9]{8,18}$/,
        }"
        :class="{ invalid: errors.has('buyerPw') }"
      /><a> 8到20位字母加数字</a>
      <span class="error-msg">{{ errors.first("buyerPw") }}</span>
    </div>
    <div class="content">
      <label>确认密码:</label>
      <input
        type="password"
        placeholder="请输入确认密码"
        v-model="rebuyerPw"
        name="rebuyerPw"
        v-validate="{ required: true, is: buyerPw }"
        :class="{ invalid: errors.has('rebuyerPw') }"
      />
      <span class="error-msg">{{ errors.first("rebuyerPw") }}</span>
    </div>
    <div class="btn">
      <button @click="buyerPassword">修改密码</button>
    </div>
  </div>
</template>

<script>
import { mapState } from "vuex";
export default {
  name: "ChangePw",

  data() {
    return {
      oldBuyerPw: "", //旧密码
      buyerPw: "", //密码
      rebuyerPw: "", //第二次输入密码
    };
  },

  mounted() {},
  computed: {
    ...mapState({
      buyerInfo: (state) => state.user.buyerInfo,
    }),
  },
  methods: {
    async buyerPassword() {
      //所有表单验证成功再发请求
      const success = await this.$validator.validateAll();
      if (success) {
        try {
          //如果成功路由跳转到登陆
          const { oldBuyerPw, buyerPw } =
            this;

          await this.$store.dispatch("updateBuyerPassword", {
            oldBuyerPw,
            buyerPw
          });
          this.$router.push("/center/changepw");
        } catch (error) {
          alert(error.message);
        }
      }
    },
  },
};
</script>

<style lang="less" scoped>
.changePw {
  margin-top: 150px;
  margin-left: 200px;
}
.content {
  padding-left: 190px;
  margin-bottom: 18px;
  position: relative;

  label {
    font-size: 14px;
    width: 96px;
    text-align: right;
    display: inline-block;
  }

  input {
    width: 270px;
    height: 38px;
    padding-left: 8px;
    box-sizing: border-box;
    margin-left: 5px;
    outline: none;
    border: 1px solid #999;
  }

  img {
    vertical-align: sub;
  }

  .error-msg {
    position: absolute;
    top: 100%;
    left: 495px;
    color: red;
  }
}
.btn {
  text-align: center;
  line-height: 36px;
  margin-left: -130px;

  button {
    outline: none;
    width: 270px;
    height: 36px;
    background: #e1251b;
    color: #fff !important;
    display: inline-block;
    font-size: 16px;
  }
}
</style>